<template>
<view>
<view class="container">
    <view class="tab">
      <view v-for="(item, index) in tab" :key="index" :style="'width:' + (100/(tab.length)) + '%;'" :class="(showTabIndex == index ? 'activeTab':'noneUse')" :data-id="index" @tap="bindTab">{{item.name}}</view>        
    </view>

    <swiper class="Tab_page" :current="showTabIndex" :style="'height: ' + sysHeight-50 + 'px;'" @change="changeIndex"> 
      <swiper-item v-for="(tab, index) in tab" :key="index">
          <scroll-view :style="'height: ' + sysHeight-40 + 'px;'" class="tab_page_list" scroll-y upper-threshold="-30" lower-threshold="10" :data-index="index" @scrolltoupper="scrollTopToReflesh" @scrolltolower="scrollBottomToLoadMore">
            <view class="tab_page_list_container" style="background: #eee;">
                <block v-if="!tab.List">  
                    <view class="noneList">没有相关订单</view>
                </block>
                <block v-else> 
                    <view class="cartContainer" v-for="(list, i) in tab.List" :key="i">
                      <view class="cartShopName"> 
                        <view class="user">
                          <image :src="list.platformUserIcon"></image>
                          <text class="font_09">{{list.platformUserName }}</text>
                        </view>
                        <text class="font_09" :style="'color:' + setting.platformSetting.defaultColor">{{list.backTime  }}</text>
                      </view>

                      <view class="cartItems" :data-id="list.orderItemId" @tap="lookMore">
                        <view class="itemCheckbox">
                          <image mode="aspectFill" :src="list.orderItem.itemIcon + '?x-oss-process=style/preview'"></image>
                        </view>
                        <view class="item_infomation">
                          <view class="item_infomation_name font1">{{list.orderItem.itemName}}</view>

                          <view class="item_infomation_name2" v-if="list.orderItem.measureCartesianId">{{list.orderItem.measures}}</view>
                          <view class="item_infomation_nums"> 
                            <text class="flexCenter">x {{list.orderItem.itemCount}}</text>
                          </view>
                          <view class="item_infomation_money">
                            <view>单价:￥<text class="fontPrice">{{list.orderItem.itemPrice}}</text></view>
                            <text>订单号:{{list.orderNo}}</text>
                          </view>
                        </view>
                      </view>
                      <view class="cartItems_count">—— 共{{list.backCount}}件商品 ——</view>
                      <view class="butn_container3 font_08">
                          <text>退款原因：</text>
                          <text class="tip_tags">{{list.tags}}</text>
                          <text :style="'color:' + setting.platformSetting.defaultColor">{{list.userRemark }}</text>
                      </view>
                      <view class="butn_container">
                          <text :style="'color:' + setting.platformSetting.defaultColor">退款金额：￥{{list.backAmount }}</text>
                      </view>
                      
                      <!-- 订单类型不同，按钮不一样 -->
                      <view v-if="list.backStatus  == 1" class="butn_container2">
                          <text :data-index="index" :data-id="list.id" data-accept="1" @tap="dellBackButnAgree">同意</text>
                          <text class="refu" :data-index="index" :data-id="list.id" data-accept="2" @tap="dellBackButn">拒绝</text>
                      </view>
                      <view v-if="list.backStatus  == 2" class="butn_container2">
                          <view>已同意</view>
                      </view>
                      <view v-if="list.backStatus  == 5" class="butn_container2">
                          <view>已拒绝</view>
                      </view>
                      <view v-if="list.backStatus  == 3" class="butn_container2">
                          <view>已退款</view>
                      </view>
                    </view>
                     <view v-if="tab.listEnd" class="dixian"> 我是有底线的 ~</view> 
                </block>
            </view>
          </scroll-view>
      </swiper-item>
    </swiper>
</view>

<view class="kefu_wx" catchtouchmove="true" v-if="showKefu">
    <view class="kefu_bg_zhezhao" @tap="closeKefu"></view>
    <view class="kefu_wx_card">
      <view class="inputContainer">
        <view class="font_red">{{butnText}}理由</view>
        <view class="textAreaContainer">
          <textarea @blur="getTextAreaValue" maxlength="150" placeholder="写下你的理由"></textarea>
        </view> 
        <view class="ButnContainer">
           <button @tap="closeKefu">取消</button>
           <button @tap="surePost">确定</button>
        </view>
      </view>
      
    </view>
  </view>
</view>
</template>

<script>

export default {
  data() {
    return {
      orderList: [],
      reflesh: false,
      showTabIndex: 0,
      sysWidth: 320,
      sysHeight: 568,
      tab: [],
      showKefu: false,
      butnText: '是否同意',
      opt: {},
      param_post: {},
      bindToReflesh: {
        focusTab: null,
        index: null
      },
      params: {
        backStatus: '1',
        page: 1
      },
      params: {
        backStatus: '2',
        page: 1
      },
      params: {
        backStatus: '5',
        page: 1
      },
      params: {
        backStatus: '3',
        page: 1
      },
      setting: "",
      loginUser: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.opt = options;
    console.log(options);
    this.setData({
      tab: this.tabBar
    });
    this.dellOpt(options);
  },
  onReady: function () {
    this.setData({
      setting: getApp().globalData.setting,
      loginUser: getApp().globalData.loginUser,
      sysWidth: getApp().globalData.sysWidth,
      sysHeight: getApp().globalData.sysHeight
    });
  },
  methods: {
    /* 去详情页面 */
    lookMore: function (e) {
      var id = e.currentTarget.dataset.id;
      wx.navigateTo({
        url: '/pages/back_item_more/index?orderItemId=' + id
      });
    },

    /* 点击tab */
    bindTab: function (e) {
      var index = e.currentTarget.dataset.id;

      if (this.showTabIndex == index) {
        return;
      }

      this.setData({
        showTabIndex: index
      });
    },

    /* 滑动事件 */
    changeIndex: function (e) {
      var index = e.detail.current;
      let tab = this.tab;
      let focusTab = tab[index];

      if (!focusTab.List || focusTab.List.length == 0) {
        this.getOrderList(focusTab, index);
      }

      this.setData({
        showTabIndex: index
      });
    },

    /* 获取数据 */
    getOrderList: function (focusTab, index, fresh) {
      let params = focusTab.params;
      let tab = this.tab;
      var customIndex = getApp().globalData.AddClientUrl("/get_mendian_back_amount_list_admin_mendian_json.html", params, 'post');
      var that = this; // wx.showLoading({
      //   title: 'loading'
      // })

      getApp().globalData.showToastLoading('loading', true);
      wx.request({
        url: customIndex.url,
        data: customIndex.params,
        header: getApp().globalData.headerPost,
        method: 'POST',
        success: function (res) {
          console.log('-----------orderList--------');
          console.log(res.data);

          if (res.data.errcode == '0') {
            focusTab.params.pageSize = res.data.relateObj.pageSize;
            focusTab.params.curPage = res.data.relateObj.curPage;
            focusTab.params.totalSize = res.data.relateObj.totalSize;
            let result = res.data.relateObj.result;

            if (fresh) {
              focusTab.List = [];
            }

            if (!result || result.length == 0) {
              focusTab.List = null;
            } else {
              focusTab.List = focusTab.List.concat(result);
            }

            tab[index] = focusTab;
            that.setData({
              tab: tab
            });
          } else {
            console.log('error');
          }

          wx.hideLoading();
        },
        fail: function (res) {
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },

    /* 加载更多 */
    scrollBottomToLoadMore: function (e) {
      let that = this;
      console.log(this.loading);

      if (this.loading) {
        return;
      }

      this.loading = true;
      let index = e.currentTarget.dataset.index;
      let tab = this.tab;
      let focusTab = tab[index];

      if (focusTab.params.totalSize > focusTab.params.page * focusTab.params.pageSize) {
        ++focusTab.params.page;
        this.getOrderList(focusTab, index);
      }

      setTimeout(function () {
        that.loading = false;
      }, 2000);
    },

    /* 第一次加载 */
    dellOpt: function (options) {
      if (this.tab.length == 0) {
        return;
      }

      let easyStatus = options.easyStatus;

      if (!easyStatus) {
        easyStatus = 0;
      }

      let tab = this.tab;
      let index = 0;

      for (let i = 0; i < tab.length; i++) {
        if (tab[i].params.easyStatus == easyStatus) {
          index = i;
        }
      }

      this.getOrderList(tab[index], index);
      this.setData({
        showTabIndex: index
      });
    },

    getTextAreaValue(e) {
      console.log(e);
      this.param_post.rejectReason = e.detail.value;
    },

    showResonTextArea(param_post) {
      this.setData({
        showKefu: true
      });
    },

    closeKefu() {
      this.setData({
        showKefu: false
      });
    },

    /* 退货 */
    dellBackButn: function (e) {
      var id = e.currentTarget.dataset.id;
      var index = e.currentTarget.dataset.index;
      let accept = e.currentTarget.dataset.accept;
      let tab = this.tab;
      let focusTab = tab[index];
      var that = this;
      this.bindToReflesh.focusTab = focusTab;
      this.bindToReflesh.index = index;
      let param_post = {};
      param_post.acceptStatus = accept;
      param_post.shopBackAmountId = id;
      param_post.acceptStatus = accept;
      this.param_post = param_post;
      this.showResonTextArea();
      let returnText = '';

      if (accept == 1) {
        returnText = '同意';
      } else {
        returnText = '拒绝';
      }

      this.setData({
        butnText: returnText
      });
    },
    surePost: function () {
      console.log(this.param_post);
      this.postBackParam(this.param_post);
    },

    postBackParam(param_post) {
      let focusTab = this.bindToReflesh.focusTab;
      let index = this.bindToReflesh.index;
      let that = this;
      wx.showModal({
        title: that.butnText,
        content: '退货申请？',
        success: function (res) {
          that.setData({
            showKefu: false
          });

          if (res.confirm) {
            var customIndex = getApp().globalData.AddClientUrl("/accept_or_reject_back_order_item_amount.html", param_post, 'post');
            wx.request({
              url: customIndex.url,
              data: customIndex.params,
              header: getApp().globalData.headerPost,
              method: 'POST',
              success: function (res) {
                console.log(res.data);

                if (res.data.errcode == '0') {
                  console.log(res.data);
                  wx.showToast({
                    title: '操作成功',
                    icon: 'success',
                    duration: 1000
                  });
                  setTimeout(function () {
                    focusTab.params.page = 1;
                    that.getOrderList(focusTab, index, 1);
                  }, 1000);
                } else {
                  wx.showToast({
                    title: res.data.errMsg,
                    image: '/wxcomponents/images/icons/tip.png',
                    duration: 1000
                  });
                }
              },
              fail: function (res) {
                getApp().globalData.loadFail();
              }
            });
          } else if (res.cancel) {
            that.setData({
              showKefu: false
            });
          }
        }
      });
    },

    dellBackButnAgree: function (e) {
      var id = e.currentTarget.dataset.id;
      var index = e.currentTarget.dataset.index;
      let accept = e.currentTarget.dataset.accept;
      let tab = this.tab;
      let focusTab = tab[index];
      var that = this;
      let param_post = {};
      param_post.acceptStatus = accept;
      param_post.shopBackAmountId = id;
      param_post.acceptStatus = accept;
      wx.showModal({
        title: '同意',
        content: '退货申请？',
        success: function (res) {
          if (res.confirm) {
            var customIndex = getApp().globalData.AddClientUrl("/accept_or_reject_back_order_item_amount.html", param_post, 'post');
            wx.request({
              url: customIndex.url,
              data: customIndex.params,
              header: getApp().globalData.headerPost,
              method: 'POST',
              success: function (res) {
                console.log(res.data);

                if (res.data.errcode == '0') {
                  console.log(res.data);
                  wx.showToast({
                    title: '操作成功',
                    icon: 'success',
                    duration: 1000
                  });
                  setTimeout(function () {
                    focusTab.params.page = 1;
                    that.getOrderList(focusTab, index, 1);
                  }, 1000);
                } else {
                  wx.showToast({
                    title: res.data.errMsg,
                    image: '/wxcomponents/images/icons/tip.png',
                    duration: 1000
                  });
                }
              },
              fail: function (res) {
                getApp().globalData.loadFail();
              }
            });
          } else if (res.cancel) {}
        }
      });
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>